<template>
  <div>
    <button open-type="getUserInfo" @getuserinfo="handleInfo">授权登录</button>
  </div>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {};
  },
  methods: {
    handleInfo(e) {
      /*
        小程序的登录流程
        1.获取微信的授权信息
        2.登录小程序平台，获取登录信息
        3.登录我们自己的后台（自己的后台接口）
      */
      // 1.这里可以通过e获取微信的授权信息，用于后续的登录操作(1.获取微信的授权信息)
      // console.log(e);
      let detail = e.mp.detail;
      // 2.登录小程序平台，获取登录信息
      mpvue.login({
        success(res) {
          // console.log(res.code);
          // 3.登录我们自己的后台（自己的后台接口）
          // 首先准备好调用接口的请求参数
          let param = {
            encryptedData: detail.encryptedData,
            rawData: detail.rawData,
            iv: detail.iv,
            signature: detail.signature,
            code: res.code,
          };
          // 因为有嵌套 不方便使用 async await 要使用 .then的方法
          request("users/wxlogin", param, "post").then((res) => {
            // 此时res返回值中没有拿到token的是因为我们的账号是个人账号，只能企业账号可以获取token
            console.log(res);
            // 登录成功后，需要储存token,然后在跳转回购物车页面
            mpvue.setStorageSync("mytoken", res.data.message.token);
            // 跳回到购物车页面
            mpvue.navigateBack({
              delta: 1,
            });
          });
        },
      });
    },
  },
};
</script>

<style lang="less" scoped></style>
